<template>
  <div class="img">
    <a-upload name="file" listType="picture-card" :accept="accept" :multiple="isMultiple" :action="uploadAction" :headers="headers"
      :data="{biz:bizPath,watermark:watermark}" :fileList="fileList" :beforeUpload="beforeUpload" :disabled="disabled" :isMultiple="isMultiple"
      :showUploadList="isMultiple" @change="handleChange" @preview="handlePreview" :class="!isMultiple?'imgupload':''">
      <img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:88px" />
      <div v-else-if="fileList.length < num">
        <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">{{ text }}</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import { getFileAccessHttpUrl } from '@/api/manage'
const uidGenerator = () => {
  return '-' + parseInt(Math.random() * 10000 + 1, 10)
}
const getFileName = (path) => {
  if (path.lastIndexOf("\\") >= 0) {
    let reg = new RegExp("\\\\", "g")
    path = path.replace(reg, "/")
  }
  return path.substring(path.lastIndexOf("/") + 1)
}
export default {
  name: 'JImageUpload',
  data () {
    return {
      uploadAction: window._CONFIG['domianURL'] + "/sys/common/upload",
      uploadLoading: false,
      picUrl: false,
      headers: {},
      fileList: [],
      previewImage: "",
      previewVisible: false,
    }
  },
  props: {
    accept: {
      type: String,
      required: false,
      default: "image/png,image/jpeg"
    },
    text: {
      type: String,
      required: false,
      default: "上传"
    },
    /*这个属性用于控制文件上传的业务路径*/
    bizPath: {
      type: String,
      required: false,
      default: "temp"
    },
    /*这个属性用于控制文件上传是否加水印*/
    watermark: {
      type: String,
      required: false,
      default: "0"
    },
    num: {
      type: Number,
      required: false,
      default: 9
    },
    value: {
      type: [String, Array],
      required: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    isMultiple: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  watch: {
    value (val) {
      if (val instanceof Array) {
        this.initFileList(val.join(','))
      } else {
        this.initFileList(val)
      }
      if (!val || val.length == 0) {
        this.picUrl = false
      }
    }
  },
  created () {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { "X-Access-Token": token }
    if (this.value instanceof Array) {
      this.initFileList(this.value.join(','))
    } else {
      this.initFileList(this.value)
    }

    if (!this.value || this.value.length == 0) {
      this.picUrl = false
    }
  },
  methods: {
    initFileList (paths) {
      if (!paths || paths.length == 0) {
        this.fileList = []
        return
      }
      this.picUrl = true
      let fileList = []
      let arr = paths.split(",")
      for (var a = 0; a < arr.length; a++) {
        let url = getFileAccessHttpUrl(arr[a])
        fileList.push({
          uid: uidGenerator(),
          name: getFileName(arr[a]),
          status: 'done',
          url: url,
          response: {
            status: "history",
            message: arr[a]
          }
        })
      }
      this.fileList = fileList
    },
    beforeUpload: function (file) {
      var fileType = file.type
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
        return false
      }
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片')
        return false
      }
    },
    handleChange (info) {

      if (info.file.size) {
        const isLt3M = info.file.size / 1024 / 1024 < 3
        if (!isLt3M) {
          return false
        }
      }

      this.picUrl = false

      let fileList = info.fileList
      if (info.file.status === 'done') {

        if (info.file.response.success) {
          this.picUrl = true
          fileList = fileList.map((file) => {
            if (file.response) {
              file.url = file.response.message
            }
            return file
          })
        }
        //this.$message.success(`${info.file.name} 上传成功!`);
      } else if (info.file.status === 'error') {

        this.$message.error(`${info.file.name} 上传失败.`)
      } else if (info.file.status === 'removed') {

        this.handleDelete(info.file)
      }
      if (fileList.length > this.num) {

        fileList = fileList.slice(0, this.num)
      }
      this.fileList = fileList

      if (info.file.status === 'done' || info.file.status === 'removed') {

        this.handlePathChange()
      }
    },
    // 预览
    handlePreview (file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    getAvatarView () {
      if (this.fileList.length > 0) {
        let url = this.fileList[0].url
        return getFileAccessHttpUrl(url)
      }
    },
    handlePathChange () {
      let uploadFiles = this.fileList
      let path = ''
      if (!uploadFiles || uploadFiles.length == 0) {
        path = ''
      }
      let arr = []
      if (!this.isMultiple) {
        arr.push(uploadFiles[uploadFiles.length - 1].response.message)
      } else {
        for (let a = 0; a < uploadFiles.length; a++) {
          // update-begin-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
          if (uploadFiles[a].status === 'done') {
            arr.push(uploadFiles[a].response.message)
          } else {
            return
          }
          // update-end-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
        }
      }
      if (arr.length > 0) {
        path = arr.join(",")
      }
      this.$emit('change', path)
    },
    handleDelete (file) {
      //如有需要新增 删除逻辑
      console.log(file)
    },
    handleCancel () {
      this.close()
      this.previewVisible = false
    },
    close () {
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
<style scoped>
</style>
